<style>
.pure_form_extra { background: #fff; padding: 5px; border: 1px solid #aaa; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.pure_form_extra * { font-size: 12px !important; font-family: Trebuchet MS !important; }
.pure_table_extra { width: 100%; border: 1px solid #aaa !important; }
.pure_table_extra a { color: #666; font-family: Trebuchet MS !important;  }
.pure_table_extra * { font-size: 12px !important; font-family: Trebuchet MS; }
.pure_table_extra .date { float: right; color: #666; font-size: 11px !important; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.left { width: 700px; }
table.lo td.right { width: 250px; padding-left: 12px; }
.wrapper {
  position: relative;
  max-width: 600px;
  width: 600px;
  padding: 0 50px;
  margin: 0 auto;
}

</style>

<?php 
$opts = new stdClass();
$opts->cd .=  't.tag_id LIKE :v1';
$opts->cdv = array(':v1' => '%,' . A_NEWS . ',%');
$news = $orm->get('pb_ecom_article', 't.date', 'DESC', 1, HM_NEWSNUM, $opts)->d;

$gallery = $orm->get('pb_ecom_hm_gallery', 't.order', 'ASC', NULL, NULL, NULL)->d;

?>

<table class="lo" cellPadding="0" cellSpacing="0">
  <tr>
    <td class="left">
      <div class="wrapper">
        <ul id="sb-slider" class="sb-slider">
          <?php foreach ($gallery as $idx => $itm) { ?>
          <li>
            <a href="#" onclick="window.open('<?php echo $itm->url; ?>')"><img src="<?php echo $itm->file; ?>" alt="image<?php echo $idx; ?>"/></a>
            <div class="sb-description"><?php echo $itm->txt; ?></div>
          </li>
          <?php } ?>
        </ul>

        <div id="shadow" class="shadow"></div>

        <div id="nav-arrows" class="nav-arrows">
          <a href="#">Next</a>
          <a href="#">Previous</a>
        </div>

      </div>
    </td>
    <td class="right">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <div class="cs_cat_hi" style="width: 100%; padding: 5px 0;">网站公告</div>
        <table class="pure-table pure_table_extra" cellPadding="0" cellSpacing="0">
          <?php foreach ($news as $idx => &$itm) { ?>
          <tr class="<?php echo ($idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd'; ?>">
            <td>
              <span class="date"><?php echo date('Y-m-d', strtotime($itm->date)); ?></span>
              <a href="#" onclick="return Url.redirect(__redmd, __sys + '.php?i=<?php echo ECOM_ART_ID; ?>&__file=index_article&id=<?php echo $itm->id?>&cat=<?php echo A_NEWS; ?>');"><?php echo Utils::get_short($itm->title, 20);?></a>
            </td>
          </tr>
          <?php } ?>
          <?php for ($i = HM_NEWSNUM - count($news), $il = 0; $i > $il; $i--) { ?>
          <tr class="<?php echo ($i % 2 == 0) ? 'pure-table-even' : 'pure-table-odd'; ?>"><td>&nbsp;</td></tr>
          <?php } ?>
        </table>
      </div>
      
    </td>
  </tr>
</table>
<div>&nbsp;</div>
<script type="text/javascript">
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';

  $(function(){
    var Page = (function() {

      var $navArrows = $( '#nav-arrows' ).hide(),
        $shadow = $( '#shadow' ).hide(),
        slicebox = $( '#sb-slider' ).slicebox( {
          onReady : function() {

            $navArrows.show();
            $shadow.show();

          },
          orientation : 'r',
          cuboidsRandom : true,
          disperseFactor : 30
        } ),
        
        init = function() {

          initEvents();
          
        },
        initEvents = function() {

          // add navigation events
          $navArrows.children( ':first' ).on( 'click', function() {

            slicebox.next();
            return false;

          } );

          $navArrows.children( ':last' ).on( 'click', function() {
            
            slicebox.previous();
            return false;

          } );

        };

        return { init : init };

    })();

    Page.init();


  });
</script>